<template>
	<view class="container" style="border-top: 1rpx solid #CFCFCF;">

		<!-- 自提点列表 -->
			<view class="tuiTips" v-if="goodsDetails.length == 0" >
				<tui-tips :fixed="false" imgUrl="/static/toast/img_nodata.png">暂时还没有内容</tui-tips>
			</view>
			<bolck v-else v-for="(item, index) in goodsDetails" :key="index">
				<view class="list_networkList" @click="check(item.network_id)">
					<view class="list_left">
						<checkbox :checked='element.indexOf(item.network_id) > -1?true:false'></checkbox>
					</view>
					<view class="list_details">
						<view class="list_tops">
							<view class="name_networkList">{{item.name}}</view>
							<view class="phone_networkList">{{item.phone}}</view>
						</view>
						<view class="list_bottom">
							<view class="title_networkList">{{item.title}}</view>
							<view class="address_networkList">{{item.address}}</view>
						</view>
					</view>
					<view class="list_right" @click="modification(item.network_id)">
						<view class="menuImgPadding">
							<image src="../../static/my/setting.png" class="menuImg"></image>
						</view>
					</view>
				</view>
			</bolck>
		<!-- 自提点列表 -->
		
		<!-- 添加自提点 -->
			<view class="tui-btn-box">
				<button class="btn-primary" hover-class="btn-hover" formType="submit" type="primary" @tap="details('./selfpickupsite_add')">添加自提点</button>
			</view>
		<!-- 添加自提点 -->
	</view>
</template>
<script>
	import tuiListView from "@/components/list-view/list-view"
	import tuiListCell from "@/components/list-cell/list-cell"
	import tuiIcon from "@/components/icon/icon"
	import tuiTag from "@/components/tag/tag"
	import tuiActionsheet from "@/components/actionsheet/actionsheet"
	import tuiToast from "@/components/extend/toast/toast"
	import tuiTips from "@/components/extend/tips/tips"
	export default {
		components: {
			tuiListView,
			tuiListCell,
			tuiIcon,
			tuiTag,
			tuiActionsheet,
			tuiToast,
			tuiTips
		},
		data() {
			return {
				goodsDetails: [],
				tabletop: '自提点列表',
				actions: [
					{
						name: '删除',
						color: '#fff',
						fontsize: 30, //单位rpx
						width: 70, //单位px
						background: '#FD3B31'
					},
					{
						name: '修改',
						color: '#fff',
						fontsize: 30,
						width: 70,
						background: '#5677fc'
					}
				],
				element: [],
			}
		},

		onShow: function() {
			this.loadDate();
		},
		onLoad: function(option) {
			this.loadDate();
		},
		methods: {
			modification: function(){
				
			},
			loadDate: function() {
				this.tui.request('user/networkList',{
					
				}).then((res) => {
					console.log(res);
					if(res.data.list.length > 0){
						this.goodsDetails = res.data.list
					}
				}).catch((err) => {
					let params = {
						title: "服务器异常",
						imgUrl: "/static/toast/fail-circle.png",
						icon: true
					};
					this.$refs.toast.show(params);
				})
			},
			handlerButton: function(e) {
				let index = e.index;
				let item = e.item;
				let menuTxt = ['删除', '修改', '收藏'][index];
				this.tui.toast('您点击了【' + menuTxt + '】按钮');
			},
			details: function(url, type) {
				if (!url) {
					return false
				}
				if (type == 1) {
					uni.switchTab({
						url: url
					});
					return false
				}
				uni.navigateTo({
					url: url,
				});
			},
		}
	}
</script>

<style>
	page{
		background: #FFF !important;
	}
	.menuImgPadding{
		width: 35rpx;
		height: 35rpx;
		background: #FFFFFF;
		border-radius: 50%;
		padding: 15rpx;
		margin-top: 44.5rpx;
	}
	.menuImg{
		width: 100%;
		height: 100%;
	}
	.tui-btn-box {
		width: 100%;	
		padding: 40rpx 50rpx;
		box-sizing: border-box;
		/* background: #FFFFFF; */
		padding-bottom: 50px;
		/* box-shadow: 0px 0px 15px rgba(0,0,0,0.1); */
		position: fixed;
		display: flex;
		z-index: 10;
		bottom: 0;
		left: 0;
		padding-bottom: env(safe-area-inset-bottom);
	}
	.btn-primary {
		background: #1193e3 !important;
		border-radius: 20rpx !important;
		margin-bottom: 30px !important;
	}
	/* tuiTips */
	.tuiTips{
		margin-top: 30% ;
	}
	.tui-tips-content{
		font-size: 30rpx !important; 
		color: #cccccc !important;
	}
	/* tuiTips */
	
	/* 滑动事件 */
	.container {
		padding-bottom: 120rpx;
	}
	
	.header {
		padding: 80rpx 90rpx 60rpx 90rpx;
		box-sizing: border-box;
	}
	
	.title {
		font-size: 34rpx;
		color: #333;
		font-weight: 500;
	}
	
	.sub-title {
		font-size: 24rpx;
		color: #7a7a7a;
		padding-top: 18rpx;
	}
	
	.tui-list-item {
		padding: 40rpx 30rpx;
		display: flex;
		align-items: item;
	}
	
	.tui-title {
		width: 100%;
		padding: 50rpx 30rpx 30rpx;
		box-sizing: border-box;
		font-size: 32rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.tui-switch {
		transform: scale(0.8);
		transform-origin: 100% center;
	}
	
	.tui-custom-btn_box {
		width: 140px;
		height: 100%;
		padding: 0 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fafafa;
	}
	
	.tui-custom-btn {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background-color: #fff;
		color: #333;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}
	
	.tui-custom-mr {
		margin-right: 20rpx;
	}
	/* 滑动事件 */
	
	.list_networkList{
		width: 100%;
		border-bottom: 1rpx solid #CFCFCF;
		height: 150rpx;
		background: #FFF;
	}
	.list_left{
		width: 15%;
		line-height: 150rpx;
		text-align: center;
		float: left;
	}
	.list_details{
		width: 70%;
		float: left;
		height: 150rpx;
		font-size: 25rpx;
	}
	.list_right{
		width: 10%;
		float: left;
		height: 150rpx;
	}
	.list_tops{
		height: 75rpx;
		line-height: 75rpx;
	}
	.list_bottom{
		height: 75rpx;
		line-height: 75rpx;
	}
	.name_networkList{
		float: left;
		width: 260rpx;
		font-size: 28rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		line-clamp: 1;
		-webkit-box-orient: vertical;
	}
	.phone_networkList{
		float: left;
		width: 210rpx;
		font-size: 28rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		line-clamp: 1;
		-webkit-box-orient: vertical;
	}
	.title_networkList{
		float: left;
		width: 110rpx;
		/* text-align: center; */
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		line-clamp: 1;
		-webkit-box-orient: vertical;
	}
	.address_networkList{
		float: left;
		width: 400rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		line-clamp: 1;
		-webkit-box-orient: vertical;
	}
</style>
